<template>
  <mu-container v-loading="loading">
    <mu-row class="padt10">
      <mu-paper :z-depth="1" style="width: 100%" class="round5 ">
        <mu-flex align-items="center">
          <mu-flex>
            <mu-button icon color="primary">
              <mu-icon value="extension"></mu-icon>
            </mu-button>
          </mu-flex>
          <mu-flex fill><h3>{{title}}</h3></mu-flex>
          <mu-flex>
            <div class="padr10" slot="">

              <!--              <mu-button small flat color="primary">-->
              <!--                <mu-icon left value="refresh"></mu-icon>-->
              <!--                刷新-->
              <!--              </mu-button>-->
              <mu-button small flat color="error" @click="deleteAll()">
                <mu-icon left value="delete"></mu-icon>
                删除
              </mu-button>
              <mu-button small round color="success" @click="$goto('/admin/edit/auto',{en:en})">
                <mu-icon left value="add"></mu-icon>
                新增
              </mu-button>
            </div>
          </mu-flex>
        </mu-flex>
      </mu-paper>
    </mu-row>

<!--    <mu-row class="padt10">-->
<!--      <mu-paper style="width: 100%" :z-depth="1">-->
<!--        <mu-flex align-items="center" class="padt5 padb5">-->
<!--          <mu-flex>-->
<!--            <mu-sub-header>模糊查询：</mu-sub-header>-->
<!--          </mu-flex>-->
<!--          <mu-flex fill>-->
<!--            <mu-text-field :action-click="getList" class="padl10" action-icon="search" solo v-model="search_" placeholder="请输入关键词"></mu-text-field>-->
<!--          </mu-flex>-->
<!--          <mu-flex>-->
<!--            <mu-button small flat color="grey" @click="showSearch = !showSearch">-->
<!--              <mu-icon left value="find_in_page"></mu-icon>-->
<!--              精准查找-->
<!--            </mu-button>-->
<!--          </mu-flex>-->
<!--        </mu-flex>-->

<!--        &lt;!&ndash;        <mu-row>&ndash;&gt;-->
<!--        &lt;!&ndash;          <mu-flex>&ndash;&gt;-->
<!--        &lt;!&ndash;            <mu-flex>&ndash;&gt;-->
<!--        &lt;!&ndash;              <mu-sub-header>模糊查找：</mu-sub-header>&ndash;&gt;-->
<!--        &lt;!&ndash;            </mu-flex>&ndash;&gt;-->
<!--        &lt;!&ndash;          </mu-flex>&ndash;&gt;-->
<!--        &lt;!&ndash;        </mu-row>&ndash;&gt;-->
<!--        <div v-if="showSearch">-->
<!--          <mu-row>-->
<!--            <mu-flex>-->
<!--              <mu-flex>-->
<!--                <mu-sub-header>时间筛选：</mu-sub-header>-->
<!--              </mu-flex>-->
<!--              <mu-flex>-->
<!--                <mu-date-input solo icon="access_time" v-model="where_.start" placeholder="创建时间大于" type="dateTime" full-width landscape></mu-date-input>-->
<!--                <mu-date-input solo icon="access_time" v-model="where_.end" placeholder="创建时间小于" type="dateTime" full-width landscape></mu-date-input>-->
<!--              </mu-flex>-->
<!--            </mu-flex>-->
<!--          </mu-row>-->
<!--          <mu-row>-->
<!--            <mu-flex>-->
<!--              <mu-sub-header>分类筛选：</mu-sub-header>-->
<!--            </mu-flex>-->
<!--            <mu-flex>-->
<!--              <mu-select icon="format_indent_increase" class="" placeholder="请选择分类" filterable v-model="where_.eq.cat" full-width>-->
<!--                <mu-option v-for="(item) in options_.cat" :key="item" :label="item" :value="item"></mu-option>-->
<!--              </mu-select>-->
<!--              <mu-select icon="format_indent_increase" class="" placeholder="请选择分类" filterable v-model="where_.eq.cat" full-width>-->
<!--                <mu-option v-for="(item) in options_.cat" :key="item" :label="item" :value="item"></mu-option>-->
<!--              </mu-select>-->
<!--            </mu-flex>-->
<!--          </mu-row>-->
<!--          <mu-row>-->
<!--            <mu-flex>-->
<!--              <mu-sub-header>数值筛选：</mu-sub-header>-->
<!--            </mu-flex>-->
<!--            <mu-flex>-->
<!--              <mu-text-field icon="keyboard" solo v-model="where_.gt.name" placeholder="name大于"></mu-text-field>-->
<!--              <mu-text-field icon="keyboard" solo v-model="where_.lt.name" placeholder="name小于"></mu-text-field>-->
<!--            </mu-flex>-->
<!--          </mu-row>-->
<!--          <mu-row class="pad20">-->
<!--            <mu-flex justify-content="center" fill class="padr10">-->
<!--              <mu-button small round color="warning">-->
<!--                <mu-icon left value="cloud_download"></mu-icon>-->
<!--                Excel导出-->
<!--              </mu-button>-->
<!--            </mu-flex>-->
<!--            <mu-flex justify-content="center" fill class="padr10">-->
<!--              <mu-button small round color="primary" @click="getList()">-->
<!--                <mu-icon left value="search"></mu-icon>-->
<!--                列表查询-->
<!--              </mu-button>-->
<!--            </mu-flex>-->
<!--          </mu-row>-->
<!--        </div>-->

<!--      </mu-paper>-->
<!--    </mu-row>-->

    <mu-row class="padt10">
      <mu-paper style="width: 100%" :z-depth="1">
        <mu-data-table selectable select-all :selects.sync="selects" checkbox :columns="headers" :data="list">

          <template slot="th" slot-scope="column">
            <span>{{column.title}}</span>
          </template>
          <template slot-scope="scope">
            <td align="center">{{scope.row.pre}} {{scope.row.name}}</td>
            <td align="center">{{scope.row.url}}</td>
            <td align="center">{{scope.row.sort}}</td>
            <td align="center">
              <mu-row>
                <mu-flex>
                  <mu-button flat small color="primary" @click="$goto('/admin/edit/auto',{id:scope.row.id,en:en})">
                    <mu-icon left value="edit"></mu-icon>
                    编辑
                  </mu-button>
                </mu-flex>
                <mu-flex>
                  <mu-menu placement="bottom-end" open-on-hover>
                    <mu-button icon small>
                      <mu-icon value="more_vert"></mu-icon>
                    </mu-button>
                    <mu-list slot="content">
                      <mu-list-item button dense @click="deleteAll(scope.row.id)">
                        <span class="fs8">删除</span>
                      </mu-list-item>
                      <mu-list-item button dense @click="copy(scope.row.id)">
                        <span class="fs8">复制</span>
                      </mu-list-item>
                    </mu-list>
                  </mu-menu>
                </mu-flex>
              </mu-row>

            </td>
          </template>
        </mu-data-table>
      </mu-paper>
    </mu-row>
    <mu-row class="padt10" v-show="page.limit < page.total">
      <mu-flex justify-content="center">
        <mu-pagination @change="getList" :page-size="page.limit" raised :total="page.total" :current.sync="page.page"></mu-pagination>
      </mu-flex>
    </mu-row>
  </mu-container>
</template>
<script>
import api from '@/assets/js/api'

export default {
  name: 'adminMenuList',
  data () {
    return {
      title: '列表',
      loading: true,
      // 实体信息
      en: '',
      // 数据筛选相关
      search_: '',
      where_: {
        eq: {cat: ''},
        gt: {name: ''},
        lt: {name: ''}
        // in: {id: []}
      },
      order_: {id: 'desc'},
      options_: {
        cat: [
          'Alabama', 'Alaska', 'American Samoa', 'Arizona'
        ]
      },
      // 列表相关数据
      selects: [],
      showSearch: false,
      header: [],
      headers: [],
      list: [],
      page: {total: 0, limit: 10, page: 1}
    }
  },
  methods: {
    getList (page) {
      let _this = this
      _this.loading = true
      // 处理分页信息
      if (page !== undefined) {
        _this.page.page = page
      }
      // 处理条件筛选

      api.post('/admin/AdminMenu/list', {
        page: _this.page.page,
        _where: _this.where_,
        _order: _this.order_,
        _search: _this.search_
      }, function (res) {
        _this.loading = false
        // 实体名称
        _this.title = res.d.title
        // 实体名称
        _this.en = res.d.en
        // 分页数据
        _this.page = res.d.page
        // 处理表头信息-默认处理也可以自己配置
        _this.header = res.d.header
        let config = res.d.config
        if (_this.headers.length === 0) {
          _this.header.map(function (name) {
            _this.headers.push({title: config[name].cnName, name: name, width: config[name].width})
          })
          _this.headers.push({title: '编辑', align: 'center', name: 'edit', width: 180})
        }
        // 列表数据
        _this.list = res.d.lists
      })
    },
    deleteAll (cur) {
      let _this = this
      this.$confirm('确定要删除？', '提示', {
        type: 'warning'
      }).then(({result}) => {
        if (result) {
          // 点击了确定按钮，执行删除动作
          let ids = []
          if (cur !== undefined) {
            ids = [cur]
          } else {
            _this.selects.map(function (index) {
              ids.push(_this.list[index].id)
            })
          }
          // 执行删除动作
          api.post('/admin/AdminMenu/delete', {ids}, function (res) {
            if (res.s * 1 === 1) {
              _this.$toast.message(res.i)
              // 重载数据
              _this.getList()
            }
          })
        }
      })
    },
    copy (id) {
      let _this = this
      api.get('/admin/AdminMenu/copy', {id}, function (res) {
        if (res.s * 1 === 1) {
          _this.getList()
        }
      })
    }
  },
  created () {
  },
  mounted () {
    this.getList()
  }
}
</script>

<style scoped>

</style>
